<template>
    <div id="paper">
        <el-card>
            <div slot="header">
                <span>问卷管理</span>
                <el-button type="primary" size="mini" @click="edvisible=true">添加问卷</el-button>
            </div>
            <el-table :data="papers">
                <el-table-column prop="title" label="标题" width="80">
                </el-table-column>
                <el-table-column label="班级" width="60">
                    <div slot-scope="{row}">
                        {{row.classes[0].class_name}}
                    </div>
                </el-table-column>
                <el-table-column label="创建人" width="80">
                    <div slot-scope="{row}">
                        {{row.users[0].username}}
                    </div>
                </el-table-column>
                <el-table-column prop="ctime" label="创建时间" width="200">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <div slot-scope="{row}">
                        <el-button type="primary" @click="editfill(row)" icon="el-icon-edit" size="mini">编辑</el-button>
                        <el-button @click="release(row.id)" type="primary" icon="el-icon-tickets" size="mini">发布</el-button>
                        <el-button @click="analysis(row)" type="primary" icon="el-icon-message" size="mini">分析</el-button>
                        <el-button @click="del(row.id)" type="danger" icon="el-icon-cancel" size="mini">删除</el-button>
                    </div>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加问卷 -->
        <el-dialog title="添加" :visible.sync="edvisible" width="30%" @close="edvisible= false">
            <el-form :model="addform" ref="addform" label-width="80px">
                <!-- 标题 -->
                <el-form-item label="标题">
                    <el-input v-model="addform.title"></el-input>
                </el-form-item>
                <!-- 班级 -->
                <el-form-item label="班级">
                    <el-select v-model="addform.class_id" placeholder="选择班级">
                        <el-option v-for="cls in classes" :key="'class_'+cls.id" :label="cls.class_name" :value="cls.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 选项 -->
                <el-form-item label="选项">
                    <el-select v-model="addform.item" placeholder="选择选项">
                        <el-option v-for="itm in items" :key="'itme'+itm.id" :label="itm.item_name" :value="itm.children">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 大纲 -->
                <el-form-item label="选择大纲">
                    <el-tree @check-change="checkChange" :show-checkbox="true" :data="outlines" :props="{label:'outline_name',children:'children'}"></el-tree>
                </el-form-item>
            </el-form>
            <span slot="footer">
                    <el-button @click=" edvisible= false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </span>
        </el-dialog>
        <!-- 编辑问卷 -->
        <el-dialog title="编辑问卷" :visible.sync="edlvisible" width="30%" @close="edlvisible= false">
            <el-form :model="editform" ref="editform" label-width="80px">
                <!-- 标题 -->
                <el-form-item label="标题">
                    <el-input v-model="editform.title"></el-input>
                </el-form-item>
                <!-- 班级 -->
                <el-form-item label="班级">
                    <el-select v-model="editform.class_id" placeholder="选择班级">
                        <el-option v-for="cls in classes" :key="'class_'+cls.id" :label="cls.class_name" :value="cls.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 选项 -->
                <el-form-item label="选项">
                    <el-select v-model="editform.item" placeholder="选择选项">
                        <el-option v-for="itm in items" :key="'itme'+itm.id" :label="itm.item_name" :value="JSON.stringify(itm.children)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 大纲 -->
                <el-form-item label="选择大纲">
                    <el-tree :render-after-expannd="false" node-key="id" ref="editTree" @check-change="editCheckChange" :show-checkbox="true" :data="outlines" :props="{label:'outline_name',children:'children'}"></el-tree>
                </el-form-item>
            </el-form>
            <span slot="footer">
                    <el-button @click=" edlvisible= false">取 消</el-button>
                    <el-button type="primary" @click="edit">确 定</el-button>
                </span>
        </el-dialog>
        <!-- 分析问卷 -->
        <el-dialog title="分析" :visible.sync="anavisible" width="60%" @close="anavisible=false">
            <!-- <ve-line :data="chartData"></ve-line> -->
            <ve-pie :data="resultData"></ve-pie>

            <el-card v-for="(answer,index) in paper.answers" :key="'ans_'+index">
                <div slot="header">
                    <span>建议：{{answer.note}}</span>
                </div>
                <ul>
                    <li v-for="content in answer.content" :key="'conste_'+content.id">
                        {{content.outline_name}}
                        <el-tag size="mini" type="primary">
                            {{content.answer.item_name}}
                        </el-tag>
                    </li>
                </ul>
            </el-card>
            <span slot="footer">
                    <el-button @click="anavisible= false">取 消</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    import VeLine from 'v-charts/lib/line.common'
    import VePie from 'v-charts/lib/pie.common'
    export default {
         components: { VeLine,VePie },
        data() {
            return {
                resultData: {
                    columns: ['item', 'num'],
                    rows: []
                },
                paper: [],
                outlines: [],
                items: [],
                classes: [],
                addform: {
                    title: '',
                    content: [],
                    item: '',
                    class_id: '',
                },
                editform: {
                    id: '',
                    title: '',
                    content: [],
                    item: '',
                    class_id: '',
                },
                edvisible: false,
                edlvisible: false,
                anavisible: false,
                papers: [],
                field: "",
                fieldVal: "",
                currentPage: 1,
                pageSize: 5,
            }
        },
        created() {
            this.getPapers()
            this.getClasses()
            this.getItems()
            this.getOutlines()
        },
        methods: {
            //问卷分析
            analysis(row) {
                this.paper = row;
                this.anavisible = true;
                let {item,answers} = row
                item = JSON.parse(item)
                let map = {}
                item.forEach(ele => {
                    map[ele.item_name]=0
                });
                answers.forEach(el=>{
                   el.content.forEach(sel=>{
                       map[sel.answer.item_name]++
                   })
                });
                for(let key in map){
                    this.resultData.rows.push({item:key,num:map[key]})
                }
            },
            //问卷发布
            release(id) {
                this.$router.push(`/answer/${id}`)
            },
            //编辑里面得数据回填
            editfill(row) {
                this.edlvisible = true;
                this.editform.title = row.title;
                this.editform.id = row.id;
                this.editform.class_id = row.class_id;
                this.editform.item = row.item;
                setTimeout(() => {
                    this.$refs.editTree.setCheckedNodes(JSON.parse(row.content))
                }, 0);
            },
            //编辑
            edit() {
                this.edlvisible = false
                this.axios.put(`/papers/edit/${this.editform.id}`, {
                    item: this.editform.item,
                    class_id: this.editform.class_id,
                    title: this.editform.title,
                    content: JSON.stringify(this.editform.content),
                }).then(() => {
                    this.$message.success('编辑成功');
                    this.getPapers();
                }).catch(() => {
                    this.$message.error('编辑失败')
                })
            },
            //删除
            del(id) {
                this.$confirm('确定删除吗？', '提示').then(() => {
                    this.axios.delete(`/papers/del/${id}`).then(() => {
                        this.$message.success('删除成功');
                        this.getPapers();
                    }).catch(() => {
                        this.$message.error('删除失败')
                    })
                })
            },
            //添加
            add() {
                let item = JSON.stringify(this.addform.item);
                let content = JSON.stringify(this.addform.content);
                this.axios.post('/papers/add', {
                    item,
                    content,
                    title: this.addform.title,
                    class_id: this.addform.class_id
                }).then(() => {
                    this.edvisible = false;
                    this.getPapers()
                })
            },
            checkChange(data, flag) {
                if (flag) {
                    if (!data.children[0]) {
                        this.addform.content.push(data)
                    }
                } else {
                    let index = this.addform.content.indexOf(data);
                    this.addform.content.splice(index, 1)
                }
            },
            editCheckChange(data, flag) {
                if (flag) {
                    if (!data.children[0]) {
                        this.editform.content.push(data)
                    }
                } else {
                    let index = this.editform.content.indexOf(data);
                    this.editform.content.splice(index, 1)
                }
            },
            //获取大纲
            getOutlines() {
                this.axios.get('/outlines').then((res) => {
                    this.outlines = res.data
                }).catch(() => {})
            },
            //获取选项
            getItems() {
                this.axios.get('/items').then((res) => {
                    this.items = res.data
                }).catch(() => {})
            },
            //获取班级
            getClasses() {
                this.axios.get('/classes', {
                    params: {
                        pageSize: 9999
                    }
                }).then((res) => {
                    this.classes = res.data.rows
                }).catch(() => {})
            },
            //获取问卷
            getPapers() {
                this.axios.get('/papers', {
                    params: {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        field: this.field,
                        fieldVal: this.fieldVal
                    }
                }).then((res) => {
                    this.papers = res.data.rows
                    this.pageSize = res.data.pageSize;
                    this.currentPage = res.data.currentPage;
                }).catch(() => {})
            }
        }
    }
</script>
<style>
    #paper .el-tree-node__content {
        margin-bottom: 6px;
        border: 1px solid rgba(0, 0, 0, 0.2);
    }
</style>


